<template>
  <div class="add-notification-page">
    <div class="add-notification-wrap">
      <van-form @submit="onSubmit">
        <van-field
          v-model="ruleForm.title"
          name="标题"
          label="标题"
          placeholder="请输入标题"
          minlength="1"
          maxlength="20"
          :rules="[{ required: true, message: '请输入标题' }]"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="typeName"
          label="留言类型"
          placeholder="请选择留言类型"
          @click="showPicker = true"
          :rules="[{ required: true, message: '请至少选择一种留言类型' }]"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="ableSelectList"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          v-model="ruleForm.studentName"
          name="联系人名称"
          label="联系人名称"
          placeholder="请输入您的姓名"
          minlength="1"
          maxlength="15"
          :rules="[{ required: true, message: '请输入联系人名称' }]"
        />
        <van-field
          v-model="ruleForm.phone"
          name="联系人电话"
          label="联系人电话"
          placeholder="请输入您的电话"
          minlength="1"
          maxlength="20"
          :rules="[{ required: true, message: '请输入联系人电话' }]"
        />
        <van-field
          v-model="ruleForm.remark"
          rows="5"
          autosize
          label="回复"
          type="textarea"
          maxlength="2000"
          placeholder="请输入回复内容"
          :rules="[{ required: true, message: '请输入描述内容' }]"
          show-word-limit
          class="textarea-box"
        />
        <div class="btn-box">
          <van-button
            :disabled="btnDisabled"
            round
            block
            type="info"
            native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { getMsgType, putInnerMsg } from "@/request/api";
import { Toast } from "vant";
Vue.use(Toast);

export default {
  data() {
    return {
      ruleForm: {},
      typeName: "",
      ableSelectList: [],
      showPicker: false,
      typeList: [],
      btnDisabled: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 获取栏目列表
    async getTypeList() {
      let typeList = [];
      const { code, data } = await getMsgType();
      if (code !== 0 || !data) {
        typeList = [];
      } else [(typeList = data)];

      return typeList;
    },
    async init() {
      this.typeList = await this.getTypeList();
      let listArr = this.typeList.filter((v) => v.id !== 1);
      this.ableSelectList = listArr.map((item) => {
        return item.name;
      });
    },
    onConfirm(value) {
      this.typeName = value;
      const selectItem = this.typeList.filter((item) => {
        if (item.name === value) return item;
      });
      this.ruleForm.type = selectItem[0].id;
      this.showPicker = false;
    },
    async onSubmit() {
      this.btnDisabled = true;
      let params = {
        ...this.ruleForm,
        leaveType: 1,
      };
      const { code, msg } = await putInnerMsg(params);
      this.btnDisabled = false; // 等提交完成之后，将提交按钮改为可点击
      if (code !== 0) {
        Toast.error(msg);
        return;
      }
      Toast.success("提交成功");
      let clientW = document.body.clientWidth;
      if (clientW <= 768) this.$router.push({ name: "inboxNotifications" });
    },
  },
  watch: {
    ruleForm: {
      handler(val) {
        if (
          val.title &&
          val.type &&
          val.studentName &&
          val.phone &&
          val.remark
        ) {
          this.btnDisabled = false;
        } else {
          this.btnDisabled = true;
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
@media (max-width: 768px) {
  /deep/ .van-cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0.1rem 0.16rem;
    overflow: hidden;
    color: #323233;
    font-size: 0.14rem;
    line-height: 0.24rem;
    background-color: #fff;
  }
  .btn-box {
    margin: 0.8rem 0.16rem 0.4rem;
  }
  /deep/ .van-cell {
    padding: 0.15rem 0.1rem;
  }
  /deep/ .van-field__label::before {
    content: "*";
    color: #ff5469;
    margin-right: 0.04rem;
  }
  /deep/ .van-field__label {
    width: 1rem;
    font-size: 0.14rem;
    color: #37383d;
  }
  /deep/ .van-button {
    display: block;
    width: 3.45rem;
    height: 0.55rem;
    text-align: center;
    line-height: 0.55rem;
  }
  /deep/ .van-button--round {
    border-radius: 0.05rem;
  }
  /deep/ .van-button--info {
    color: #ffffff;
    background: #3d6cb0;
    border: none;
  }
  /deep/ .van-button--normal {
    padding: 0;
    font-size: 0.18rem;
  }
  /deep/ .van-field__error-message {
    display: none;
  }
}
</style>
